<template>
	<view class="content">
		<tui-navigation-bar backgroundColor="blue" :isFixed="false" :isOpacity="false">
			<!-- 头部 -->
			<view class="top">
				<view class="right">
					<view class="item">
						<tui-icon name="manage" class="icon-item-manage" color="#fff" size="30">
						</tui-icon>
					</view>
					<view class="item">
						<!-- 设置页面 -->
						<navigator url="">
							<tui-icon name="" class="icon-item-setup" color="#fff" size="30"></tui-icon>
						</navigator>
					</view>
				</view>
			</view>
			<!-- 显示图片 -->
			<view class="image">
				<image src="/static/images/toast/img_nodata.png" mode="aspectFill">
			</view>

			<!-- 主体 -->
			<view class="main">
				<view class="top">
					<view class="user">
						<view class="user-left">
							<image :src="usr.photourl" mode="" v-if="usr">
								</imag <image
									src="https://img0.baidu.com/it/u=1604010673,2427861166&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889"
									mode="" v-else>
							</image>
							<view class="user-content">
								<h3 class="user-id" v-if="usr">{{usr.username}}</h3>
								<h3 class="user-id" v-else>游客</h3>
								<view class="inline">
									<view class="user-id f" v-if="usr">id:{{usr.id}}</view>
									<view class="user-id f" v-else>无id</view>
									<view class="user-id f" v-if="usr">访客量:{{usr.visitnum}}</view>
									<view class="user-id f" v-else>无访客量</view>
								</view>
							</view>
						</view>
						<view class="user-right">
							<!-- 点击进入编辑信息页面 -->
							<tui-button background="blue" shape="circle" @click="editUserInfo" height="60rpx"
								width="140rpx" :size="28">
								编辑
							</tui-button>
						</view>
					</view>
					<view class="">
						<tui-tabs :tabs="tabs" :currentTab="currentTab" @change="change" sliderBgColor="blue"
							selectedColor="blue" itemWidth="50%"></tui-tabs>
					</view>
				</view>
				<view class="zhuti">

					<view class="havelogin" v-if="usr">
						<view class="myNote" v-if="currentTab==0">
							<mynoteview v-for="note in notes" :key="note.id" :noteid="note.id"
								:notetitle="note.notetitle" class="myViewItem" />
						</view>
						<view class="starList" v-if="currentTab==1">
							<starnoteview v-for="note in starlist" :key="note.id" :id="note.id"
								:notetitle="note.notetitle" class="starViewItem" />
						</view>

					</view>



					<!-- 未登录则不显示 -->

					<view class="nologin" v-else>
						<tui-button background="blue" shape="circle" @click="login" height="80rpx" width="50%"
							:size="28">
							请先登录
						</tui-button>
					</view>
				</view>
			</view>

		</tui-navigation-bar>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				current: 0,
				currentTab: 0,
				tabs: [{
					name: "笔记"
				}, {
					name: "收藏"
				}],
				starlist: [],
				notes: [],
				usr: '',
				id: "0",
				username: ""
			}
		},
		mounted() {
			// this.getUsr();
			// this.getUsrByUserName();


		},
		onShow() {
			const username = uni.getStorageSync('username')
			console.log(username);
			this.getUsrByUserName(username);
			uni.removeStorageSync('username') // 清除已使用的参数
		},
		onLoad(options) {
			// const username=this.$root.$mp.app.$globalData.username;
			

			if (typeof options.currentTab != 'undefined' || options.currentTab != null) {
				this.currentTab = options.currentTab
			}
		},
		methods: {
			getNoteByUserId(id) {
				uni.request({
					url: '/note/getNoteByUserId/' + id,
					method: 'GET',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if (res.statusCode === 200) {
							this.notes = res.data;
							console.log(this.notes);
							console.log(this.notes.length);
						}
					},
					fail: (err) => {
						console.error(err);
					}
				});
			},
			getStarList(usrid) {
				uni.request({
					url: 'http://localhost:8081/star/starList/' + usrid,
					method: 'GET',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if (res.statusCode === 200) {
							this.starlist = res.data;
						}
					},
					fail: (err) => {
						console.error(err);
					}
				});
			},
			change(e) {
				this.currentTab = e.index
			},
			login() {
				uni.navigateTo({
					url: "../../pages/login/login"
				})
			},
			getUsrByUserName(username) {
				uni.request({
					url: 'http://localhost:8081/usr/getUsrByUserName/' + username,
					method: 'GET',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if (res.statusCode === 200) {
							this.usr = res.data;
							this.id = res.data.id;
							console.log(res.data.id);
							this.getNoteByUserId(this.usr.id);
							this.getStarList(this.usr.id);
						}
					},
					fail: (err) => {
						console.error(err);
					}
				});
			},
			getUsr() {
				// 写死了！！需要登陆页面的id
				uni.request({
					url: 'http://localhost:8081/usr/getUsrById/' + 2,
					method: 'GET',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if (res.statusCode === 200) {
							this.usr = res.data;
							this.id = res.data.id;
							this.getNoteByUserId(this.usr.id);
							this.getStarList(this.usr.id);

						}
					},
					fail: (err) => {
						console.error(err);
					}
				});
			},
			editUserInfo() {
				uni.navigateTo({
					url: "../../pages/person/editInfo/editInfo?usrid=" + this.id
				})
			}

		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}


	.text {
		color: #1c167d;
		font-size: 27.91rpx;
		font-family: AlimamaShuHeiTi;
		line-height: 26.16rpx;
	}

	.grid {
		padding: 100rpx 59.3rpx;
		height: 100rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		row-gap: 80.23rpx;
		column-gap: 52.33rpx;
	}

	.grid-item {
		padding: 34.88rpx 6.98rpx 13.95rpx 24.42rpx;
		background-color: #ffffff;
		border-radius: 13.95rpx;
		border: solid 8.72rpx #6073eb;
	}

	.space-y-13>view:not(:first-child),
	.space-y-13>text:not(:first-child),
	.space-y-13>image:not(:first-child) {
		margin-top: 22.67rpx;
	}

	.image_2 {
		margin-left: 3.49rpx;
		width: 214.53rpx;
		height: 205.81rpx;
	}

	.font_1 {
		font-size: 41.86rpx;
		font-family: AlimamaShuHeiTi;
		line-height: 33.14rpx;
		color: #1c167d;
	}

	.text_2 {
		margin-left: 3.49rpx;
	}

	.image_3 {
		width: 27.91rpx;
		height: 27.91rpx;
	}

	.image_4 {
		margin-right: 76.74rpx;
	}


	@import url(person.css);
</style>